<template>
  <div v-if='details' class="marketPages">
    <img v-for="(item,index) in details.contentImage" :key="index" mode="widthFix" class="topPicture" :src="baseurl + item" alt="">
    <div class="mainBody">
      <div class="itemName">{{details.subTitle}}</div>
      <div class="flexwrapper" v-for="(item, index) in details.childType" :key="index">
        <div style="margin-right:10px;font-wight: 400;">{{item.typeName}}</div>
        <div class="pris">
          <img mode="widthFix" src="../../../static/market/dou.png" alt="">
          <span class="pri">{{item.eggNum}}</span>
          <span>颗/{{item.itemUnit}}</span>
        </div>
      </div>
      <div class="itemName">{{details.itemName}}</div>
    </div>
    <img v-if="sellOut" mode="widthFix" class="topPicture" src="../../../static/market/nothing.png" alt="">
    <img v-else @click='butNow' mode="widthFix" class="topPicture" src="../../../static/market/buy.png" alt="">
    <div v-if="!sellOut" class="bottomNav">
      <img mode="widthFix" @click="show" src="../../../static/market/kefu.png" alt="">
      <div class="pris">
        <img mode="widthFix" src="../../../static/market/dou.png" alt="">
        <span class="pri">{{first.eggNum}}</span>
        <span>颗/{{first.itemUnit}}起</span>
      </div>
      <div @click='butNow' class="buy">立即购买</div>
    </div>
    <i-action-sheet i-class-header="cancelListClass" :visible="showCancel" :actions="cancelList" show-cancel @cancel="handleCancel" @iclick="handleClickItem" />
    <i-modal :visible="visible" :show-cancel="false" :show-ok="false">
      <div style="color: #000;font-size:16px;">请添加客服微信</div>
      <span style="color: #c78650;font-size:14px;">LBB570546715</span>
      <div class="makesure" @click="makesure">确定</div>
    </i-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      first: [],
      details: {},
      sellOut: false,
      showCancel: false,
      cancelList: [],
      visible: false,
      baseurl: ''
    }
  },
  onLoad() {
    this.baseurl = this.BaseUrlImg
    this.getData();
  },
  methods: {
    show() {
      this.visible = true
    },
    makesure() {
      this.visible = false
    },
    getData() {
      let id = this.$root.$mp.query.id
      this.$http.get('/market/wx/item', { itemId: id }).then(res => {
        this.details = res.data
        this.first = res.data.childType[0]
        let sum = 0
        let list = []
        res.data.childType.map(item => {
          if (item.storeNum > 0) {
            sum = sum + item.storeNum
            list.push({ name: item.typeName, color: '#333333' })
          } else {
            list.push({ name: item.typeName, color: '#999999' })
          }
        })
        this.cancelList = list
        if (sum) {
          this.sellOut = false
        } else {
          this.sellOut = true
        }
      })
    },
    butNow() {
      this.showCancel = true
    },
    handleClickItem(data) {
      let params = this.details.childType[data.mp.detail.index]
      if (params.storeNum) {
        params.itemName = this.details.itemName
        params.subTitle = this.details.subTitle
        wx.navigateTo({
          url: '../buyMarket/main?query=' + JSON.stringify(params)
        })
      }
    },
    handleCancel() {
      this.showCancel = false
    },
  }
}
</script>
<style lang="scss" scoped>
.marketPages {
    padding-bottom: 90rpx;
    .topPicture {
        width: 100%;
    }
    .mainBody {
        .itemName {
            font-size: 44rpx;
            text-align: center;
        }
        .flexwrapper {
            display: flex;
            justify-content: center;
            align-items: baseline;
            line-height: 80rpx;
            color: #c78550;
            font-size: 36rpx;
        }
    }

    .bottomNav {
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 18rpx;
        height: 90rpx;
        width: 100%;
        opacity: 1;
        background-color: #fff;
        border-top: 1rpx solid #eee;
        & > img {
            width: 40rpx;
        }

        .buy {
            width: 360rpx;
            height: 60rpx;
            line-height: 60rpx;
            color: #fff;
            text-align: center;
            font-size: 30rpx;
            border-radius: 10rpx;
            background-color: #c78550;
        }
    }
    .pris {
        display: flex;
        align-items: baseline;
        line-height: 40rpx;
        color: #c78550;
        img {
            margin-right: 10rpx;
            width: 26rpx;
            height: 36rpx;
        }
        .pri {
            margin-right: 10rpx;
            font-size: 40rpx;
        }
        & > span:last-child {
            font-size: 30rpx;
        }
    }
}
.makesure {
    margin: 40rpx auto 0;
    padding: 10rpx;
    width: 80rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #c78550;
    border-radius: 10rpx;
}
</style>

